<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="bootstrap.min.css" rel="stylesheet">
<style>
.error
{
color:red;
}
</style>

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="messages_zh.js"></script>
 
 
 <script>
 $.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});

jQuery.validator.addMethod("isEmail",function(value,element){
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
return this.optional(element) || (myreg.test(value));
},"请正确填写您的邮箱");


jQuery.validator.addMethod("isPassword",function(value,element){
var pas=(/[A-Z]/.test(password.value.charAt(0)));
return this.optional(element) || (pas.test(value));

},"请正确填写您的密码");

jQuery.validator.addMethod("isNumber",function(value,element){
 var length = value.length;
        var mobile = /^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

 $().ready(function(){
  $("#signupForm").validate({
    rules:{
      username:{
        required:true,
        minlength: 3
      },
	   email:{
        required:true,
        email: true,
		isEmail:true
		  
      },
      password:{
        required:true,
        minlength: 6,
		isPassword:true
      },
      repassword:{
        required: true,
        minlength: 6,
         equalTo: "#password"
      },   
      number:{
        required:true,
        maxlength: 11,
		isNumber:true
      },
    },
    messages:{
      username:{
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password:{
        required: "请输入密码",
        minlength: "密码长度不能小于6位",
		isPassword:"第一位为大写字母"
      },
      repassword:{
        required: "请输入密码",
        minlength: "密码长度不能小于6位"
      },
	  number:{
	  required:"请输入11位数字",
	  isNumber:"手机格式错误"
	  },
      email:{
	  required:"请输入一个正确的邮箱",
	  isEmail:"邮箱格式错误"
     }
     }
    });
});

 </script>
</head>
<body>
<form class="form-horizontal" id="signupForm" method="get" action="">
  <fieldset>
    
    <div class="form-group">
      <label for="firstname">用户名</label>
     <input type="text" name="username"  id="username" placeholder="请输入用户名"/>
    </div>
    <p>
      <label for="lastname">邮箱</label>
      <input type="email" name="email" id="email"  placeholder="请输入邮箱地址"/>
    </p>
    <p>
      <label for="username">密码</label>
     <input type="password"  name="password"  id="password" required="required" placeholder="请输入密码"/>
    </p>
  
    <p>
      <label for="confirm_password">确认密码</label>
     <input type="password"  name="repassword"  id="repassword" placeholder="请确认密码"/>
    </p>
    <p>
      <label for="email">联系电话</label>
      <input type="number" name="number"  id="number" placeholder="请输入联系电话"/>
    </p>
    <p>
      <label for="agree">我是企业用户</label>
      <input type="checkbox" name="enusername" value="我是企业用户" class="radio-inline"/>我是企业用户
    </p>
    <p>
      <label for="newsletter">同意服务条款并注册</label>
     <input type="checkbox" name="agree" value="同意服务条款并注册" class="radio-inline">
    </p>
    
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>
</body>
</html>